<template>
  <div>
    <mt-header title="消费记录">
      <router-link to="/my" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="page" v-for="item in records">
      <p :class="payNum(item)">{{money(item)}}</p>
      <p>{{item.name}}</p>
      <p>{{time(item.time)}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PayRecord",
    data() {
      return {
        records: []
      }
    },
    methods: {
      requestRecords() {
        //请求消费记录
        let postData = this.$qs.stringify({
          token: this.token,
        });
        this.$axios.get(this.$apis.PayRecord, postData).then(res => {
          console.log(res);
          if (res.data.code === 1) {
            //成功
            this.records = res.data.data;

          } else {
            //弹错误提示
            this.$myUtils.bottomToast(res.data.msg)
          }
        })
          .catch(error => {
            this.$myUtils.bottomToast(error)
          })
      },
      //判断是支出还是收入，来变换颜色
      payNum: function (item) {
        return {
          payBase: true,
          income: item.moneyType === 2,
          pay: item.moneyType === 1,
        }
      },
      money: function (item) {
        let num;
        if (item.moneyType === 2) {
          return num = "+" + item.money
        } else if (item.moneyType === 1) {
          return num = "-" + item.money
        }
        return num

      },
      //把日期转化
      time(value) {
        // 根据毫秒数构建 Date 对象
        let date = new Date(value);
        // 格式化日期
        return  date.toLocaleString();

      }
    },
    mounted() {
      this.token = localStorage.getItem("token");
      if (this.token !== null && this.token !== "") {
        //请求二维码
        this.requestRecords();

      } else {//token失效重新登陆
        this.$router.push('/login');
      }

    },
    computed: {}
  }
</script>

<style scoped>
  .payBase {
    float: right;
    color: black;
  }

  .income {
    color: #7cfeab;
  }

  .pay {
    color: #fe7888;
  }

  p {
    font-size: 15px;
  }

  .page {
    border-radius: 5px;
    background: white;
    margin: 5px;
    padding: 5px;
  }

</style>
